// 歌手页面
import { reactive } from 'vue';
import { alphaTypes } from '@/api/config.js';
import { getSingerListApi } from '@/api/request.js';
import ProImage from '../../components/ProImage';
import { useRouter } from 'vue-router';
import './singers.scss'

const Singers = ({
    name: 'singer',
    setup(){
        const state = reactive({
            alpha: 'A', // 首字母
            singerList: [], // 歌手列表
            loading: false, // vant-list 加载
            finished: false, // 加载完成
            offset: 0, // 偏离量
            limit: 10, // 返回长度
            loadAble: true // 是否加载
        });
        const router = useRouter();
        // 请求
        const initPage = () => {
            if(!state.loadAble) return;
            Object.assign(state,{
                loadAble: false
            });
            setTimeout(() => {
                // 接口延迟大、不用接太多数据
                if(state.offset > 24){
                    console.log('分页加载结束');
                    Object.assign(state, {
                        loading: false,
                        loadAble: false,
                        finished: true,
                    });
                    return;
                }
                getSingerListApi(-1, state.alpha, state.offset, state.limit).then(res => {
                    if(res.code === 200){
                        const dataLength = res.artists ? res.artists.length : 0 ;
                        if(dataLength){
                            Object.assign(state,{
                                loadAble: true,
                                loading: false,
                                offset: state.offset + dataLength,
                                singerList: [...state.singerList, ...res.artists]
                            });
                        }else {
                            Object.assign(state, {
                                loading: false,
                                loadAble: false,
                                finished: true,
                            })
                        }
                    } 
                })
            }, 100);
        };
        // 点击首字母
        const handleAlphaClick = (name) => {
            Object.assign(state, {
                alpha: name,
                singerList: [],
                offset: 0,
                loadAble: true,
                finished: false
            });
            initPage();
        };
        // 点击歌手
        const handleSingerClick = (id) => {
            router.push(
                {
                    path: '/singer',
                    query: {id}
                }
            )
        };
        // 渲染字母列表
        const renderAlphaBar = () => (
            <div className="singersTabBar">
                <div className="title">首字母:</div>
                <ul className="azList">
                    {
                        alphaTypes.map(item => (
                            <li 
                                onClick={() => handleAlphaClick(item.name)}
                                key={item.key}
                                className={state.alpha === item.name ? 'active' : 'noActive'}
                            >
                                {item.name}
                            </li>
                        ))
                    }
                 </ul>
            </div>
        );
        // 渲染歌手
        const renderSingerList = () => (
            <van-list
                v-model={[state.loading,'loading']}
                finished={state.finished}
                loading-text="努力加载中~"
                finished-text="亲,没有更多了~"
                onLoad={initPage}
                error-text="网络繁忙，点击重新加载"
            >
                {
                    state.singerList.map((item,index) => (
                        <van-cell key={index} onClick={() => handleSingerClick(item.id)}>
                            <div className="singerItem">
                                <div className="imgBox">
                                    <ProImage radius={4} src={item.picUrl} />
                                </div>
                                <div className="name">
                                    {item.name}
                                </div>
                            </div>
                        </van-cell>
                    ))
                }
            </van-list>
        );
        return () => (
            <div className="singersPage">
                {renderAlphaBar()}
                {renderSingerList()}
            </div>
        )
    }
});
export default Singers;